<template>
    <div class="weather-container">
        <div class="wrap content">
            <div class="citySearch">
                <input 
                type="text"
                placeholder="请输入城市名称"
                v-model.trim="cityName"
                @input="handleSearchInput"
                />
            </div>
            <ul class="search-result" v-if="cityName">
                <li
                v-if="status === '1'"
                v-for="item in choices"
                :key="item.adcode"
                @click="handleSearchCity"
                >
                {{  item.city  }}
            </li>
            <p v-else>{{ errorMessageShow }}</p>
            </ul>
            <div class="citySearch-List" v-else-if="cityWeatherList.length">
                <div
                class="list-item"
                v-for="item in cityWeatherList"
                :key="item.Adcode"
                >
                <CityItem :item="item" />    
             </div>
            </div>
            <div class="no-data" v-else>
                <h1>暂时没有保存过城市天气信息,请查询后点击右上角"+"号保存</h1>
            </div>
            <Charts :weatherInFourDays="cityWeatherInFourDaysHome" />
        </div>
    </div>
</template>

<script setup>
import { ref,computed,onMounted } from 'vue'
import { WeatherStore } from '@/stores/counter';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { getCityByIP,getAdcodeByCity,getAllWeatherByAdcode } from '@/api';

import CityItem from '@/components/CityItem.vue'
import Charts from '@/components/Charts.vue'

const router = useRouter()
const cityName = ref('')
const cityWeatherInFourDaysHome = ref([])
const status = ref('')
const choices = ref([])
const weatherStore = WeatherStore()
const { cityWeatherList } = storeToRefs(weatherStore)
const { getCityWeatherList } = weatherStore

//显示搜索错误的信息
const errorMessageShow = computed(() => {
    return status.value === '0'?'网络问题，请稍后重试':'未找到相应的城市';
})

const handleSearchInput = async() => {
    if(!cityName.value) {
        choices.value = []
        status.value = ''
        return;
    }

    const res = await getAdcodeByCity(cityName.value)
    status.value = res.status
    choices.value = res.geocodes;
}

//点击li跳转到城市天气页面
const handleSearchCity = async(event) => {
    const res = await getAdcodeByCity(cityName.value)
    router.push({
        name:'cityweather',
        params:{Adcode:res.geocodes[0].adcode},
        query:{search:event.target.textContent},
    })
}

//页面加载完成后，获取用户当前所在城市天气信息
onMounted(async () =>{
    getCityWeatherList();
    const res = await getCityByIP();
    const res2 = await getAllWeatherByAdcode(res.adcode);
    cityWeatherInFourDaysHome.value = res2.forecasts[0].casts;
}
)
</script>

<style lang="scss" scoped>
.weather-container {
    height: 90vh;
    color: #fff;
    background-color: #00668a;
    .content {
        .citySearch {
            input {
                margin-top: 20px;
                width: 100%;
                height: 30px;
                font-size: 1rem;
                color: #fff;
                background-color: transparent;
                border: none;
                border-bottom: 1px solid #fff;
                &:focus {
                    outline: 2px solid transparent;
                    outline-offset: 2px;
                    border: none;
                    box-shadow: 0 3px 4px #06526d;
                }
                &::placeholder {
                    color: #8793a7;
                }
            }
        }
        .search-result {
            width: 100%;
            font-size: 18px;
            color: #fff;
            background-color: transparent;
            p {
                margin-top: 10px;
            }
            li {
                height: 40px;
                line-height: 40px;
                background-color: #004e71;
                margin-top: 5px;
                padding-inline: 10px;//水平方向padding
                cursor: pointer;
            }
        }
        .citySearch-List {
            margin-top: 50px;
        }
        .no-data {
            margin: 50px auto;
            h1 {
                font-size: 18px;
                color: #fff;
                text-align: center;
            }
        }
    }
}
</style>